<template>
    <div class="wrapper">
        <order-textarea
          ref="orderTextareaRef"
          v-model="value"
          placeholder="请输入内容，每行一个"
          :row-height="32"
          :fixed-rows="5"
          :min-rows="2"
          :max-rows="10"
          :trim="true"
          :delete-blank-rows="true"
          :merge-repeat-rows="true"
          :limit-rows="200"
          :disabled="false"
          @focus="onFocus"
          @input="onInput"
          @blur="onBlur">
            <template #order="{number}">
                #{{ number }}
            </template>
            <template #placeholder>
                <div class="order-textarea__placeholder">
                    自定义Placeholder
                </div>
                <div class="order-textarea__placeholder">
                    <i>请输入内容，每行一个</i>
                </div>
            </template>
        </order-textarea>
        <a @click="scrollToRow(50)">
            滚动到第50行
        </a>
        <a @click="handleFocus()">
            获取焦点
        </a>
        <a @click="handleBlur()">
            移除焦点
        </a>
    </div>
</template>

<script setup>
    import {
        onMounted,
        ref,
    } from "vue"
    // import OrderTextarea from "/dist"
    import OrderTextarea from "./packages/index.vue"

    const value = ref([])
    const orderTextareaRef = ref(null)

    onMounted(() => {
        for (let i = 0; i < 500; i++) {
            value.value.push(`第${i + 1}行`)
        }
    })

    function onFocus() {
        console.log("onFocus")
    }

    function onInput(val) {
        console.log("onInput", val)
    }

    function onBlur() {
        console.log("onBlur")
    }

    function scrollToRow(number) {
        orderTextareaRef.value.scrollToRow(number, -1)
    }

    function handleFocus() {
        orderTextareaRef.value.focus()
    }

    function handleBlur() {
        orderTextareaRef.value.blur()
    }
</script>

<style scoped>
    .wrapper {
        padding: 24px;
        width: 500px;
    }

    .order-textarea__placeholder {
        padding-left: 40px;
    }
</style>